<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ref</title>
</head>
<body>
<div id="app"></div>
<script type="module">
    import {
        proxyRefs,
        computed,
        reactive,
        watchEffect,
        effect,
        watch,
        ref,
        toRef,
        toRefs,
        effectScope
    } from "../js/reactivity/index.js";


    // 错误语法
    // let state = reactive({a: 1})
    // state = reactive({a: 2}) // 直接改变了对象引用，新的引用和原来的没关系了
    // 正确语法
    // let state = ref({a: 1})
    // state.value = {a: 2}

    // const flag = ref(true)
    // watchEffect(() => {
    //     app.innerHTML = flag.value ? 1 : 2
    // })
    // setTimeout(() => {
    //     flag.value = false
    // }, 1000)

    // const state1 = reactive({
    //     name: 'jw'
    // })
    // const state2 = reactive({
    //     age: 30
    // })
    // const r = proxyRefs({...toRefs(state1), ...toRefs(state2)})
    //
    // watchEffect(() => {
    //     app.innerHTML = r.name.value + r.age.value
    // })

    // effect停止逻辑
    // const val = ref('abc')
    // const runner = effect(() => {
    //     console.log(val.value)
    // })
    // setTimeout(() => {
    //     val.value = 'bcd'
    // }, 1000)
    // runner.effect.stop()

    const scope = effectScope() // 依赖收集
    scope.run(() => {
        const val = ref('a')
        effect(() => {
            console.log(val.value)
        })
        effect(() => {
            console.log(val.value)
        })
        setTimeout(() => {
            val.value = 'b'
        })

        const scopeInner = effectScope(true) // 依赖收集
        scopeInner.run(() => {
            const val = ref('inner a')
            effect(() => {
                console.log(val.value)
            })
            effect(() => {
                console.log(val.value)
            })
            setTimeout(() => {
                val.value = 'inner b'
            })
        })
    })
    scope.stop()

</script>
</body>
</html>
